import QtQuick 1.0
import "js/Engine.js" as Engine
import "js/G.js" as G

Item {
    id: idLoginSignup

        Text {
            id:textUserName
            anchors.top: parent.top
            anchors.topMargin: 25
            anchors.left: parent.left
            anchors.leftMargin: 10
            width: parent.width / 4
            height:  50
            text: "Username"
            color: "white"
            font { bold: true; family: "Helvetica"; pixelSize:18 }
            horizontalAlignment: "AlignRight"
        }


        Image {
            id: backgroundUsername
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.left: textUserName.right
            anchors.leftMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 40
            source:"Images/text-background.png"
            Behavior on opacity { NumberAnimation { duration: 100  } }
        }

        TextInput {
            id:textInputUserName
            anchors.top: parent.top
            anchors.topMargin: 25
            anchors.left: textUserName.right
            anchors.leftMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 50
            height:  50
            text: ""
            font { bold: true; family: "Helvetica"; pixelSize:18 }
            color: "black"
        }

        Text {
            id:textPassword
            anchors.top: textUserName.bottom
            anchors.topMargin: 15
            anchors.left: parent.left
            anchors.leftMargin: 10
            width: parent.width / 4
            height:  50
            text: "Password"
            color: "white"
            font { bold: true; family: "Helvetica"; pixelSize:18 }
            horizontalAlignment: "AlignRight"

        }

        Image {
            id: backgroundPassword
            anchors.top: textInputUserName.bottom
            anchors.left: textPassword.right
            anchors.leftMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 40
            source:"Images/text-background.png"
            Behavior on opacity { NumberAnimation { duration: 100  } }
        }


        TextInput {
            id:textInputPassword
            anchors.top: textInputUserName.bottom
            anchors.topMargin: 15
            anchors.left: textPassword.right
            anchors.leftMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 50
            height:  50
            text: ""
            font { bold: true; family: "Helvetica"; pixelSize:18 }
            color: "black"
            echoMode: TextInput.Password
        }

        LoginButton { id: loginButton
            anchors.top: textInputPassword.bottom
            anchors.topMargin: 15
            anchors.right: parent.right
            anchors.rightMargin: 10
        }

        SignupButton { id: signupButton
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: loginButton.verticalCenter
        }

        LogoutButton { id: logoutButton
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: loginButton.verticalCenter
        }




    states: [
        State {
            name: "LoggedIn"
            PropertyChanges { target:loginButton; opacity: 0; }
            PropertyChanges { target:signupButton; opacity: 0; }
            PropertyChanges { target:logoutButton; opacity: 1; }
            PropertyChanges { target:backgroundUsername; opacity: 0; }
            PropertyChanges { target:backgroundPassword; opacity: 0; }
            PropertyChanges { target:textInputPassword; readOnly: true; }
            PropertyChanges { target:textInputUserName; readOnly: true; }
            PropertyChanges { target:textInputPassword; color: "#9DE352" }
            PropertyChanges { target:textInputUserName; color: "#9DE352" }
        },
        State {
            name: "LoggingIn"
            PropertyChanges { target:loginButton; opacity: 0; }
            PropertyChanges { target:signupButton; opacity: 0; }
            PropertyChanges { target:backgroundUsername; opacity: 0; }
            PropertyChanges { target:backgroundPassword; opacity: 0; }
            PropertyChanges { target:textInputPassword; opacity: 0; }
            PropertyChanges { target:textInputUserName; opacity: 0; }
            PropertyChanges { target:logoutButton; opacity: 0; }
            PropertyChanges { target:textUserName; opacity: 0; }
            PropertyChanges { target:textPassword; opacity: 0; }
        },
        State {
            name: "SigningIn"
            PropertyChanges { target:loginButton; opacity: 0; }
            PropertyChanges { target:signupButton; opacity: 0; }
            PropertyChanges { target:backgroundUsername; opacity: 0; }
            PropertyChanges { target:backgroundPassword; opacity: 0; }
            PropertyChanges { target:textInputPassword; opacity: 0; }
            PropertyChanges { target:textInputUserName; opacity: 0; }
            PropertyChanges { target:logoutButton; opacity: 0; }
            PropertyChanges { target:textUserName; opacity: 0; }
            PropertyChanges { target:textPassword; opacity: 0; }
        },
        State {
            name: "LoggedOut"
            PropertyChanges { target:loginButton; opacity: 1; }
            PropertyChanges { target:signupButton; opacity: 1; }
            PropertyChanges { target:logoutButton; opacity: 0; }
            PropertyChanges { target:backgroundUsername; opacity: 1; }
            PropertyChanges { target:backgroundPassword; opacity: 1; }
            PropertyChanges { target:textInputPassword; readOnly: false; }
            PropertyChanges { target:textInputUserName; readOnly: false; }
            PropertyChanges { target:textInputPassword; color: "black" }
            PropertyChanges { target:textInputUserName; color: "black" }
            PropertyChanges { target:textInputPassword; text: ""; }
        }
    ]

    WorkerScript {
             id: loginWorker
             source: "js/FetcherLogin.js"
             onMessage: {
                 if (messageObject.result == "SUCCESS") {
                     idLoginSignup.state = "LoggedIn"
                     imageLoading.opacity = 0; // FIXME: dirty trick
                     container.token = messageObject.token; // set the global token
                     Engine.reloadAll();
                 } else {
                     idLoginSignup.state = "LoggedOut"
                     theMessageBox.text  = "Wrong username or password"
                     theMessageBox.opacity = 1
                 }
             }
         }

    WorkerScript {
             id: signupWorker
             source: "js/FetcherSignup.js"
             onMessage: {
                 if (messageObject.result == "SUCCESS") {
                    loginWorker.sendMessage({'username': textInputUserName.text, 'password': textInputPassword.text, 'g': G.g});
                 } else {
                     idLoginSignup.state = "LoggedOut"
                     theMessageBox.text  = "Error signing up, please try again"
                     theMessageBox.opacity = 1
                 }
             }
         }

    WorkerScript {
             id: logoutWorker
             source: "js/FetcherLogout.js"
             onMessage: {
                 idLoginSignup.state = "LoggedOut"
                 container.token = messageObject.token; // reset the global token
                 Engine.reloadAll();
             }
         }


}
